<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    :root {
        --percentage: 0%;
    }

    body {
        background-color: #000;
        margin: 0;
        height: 300vh;
    }

    .sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    h1 {
        font-family: Helvetica;
        margin: 0;
        padding: 0;
        font-size: 48px;
        color: #fff;
        letter-spacing: -0.3px;

        background-image: linear-gradient(75deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33.33%, rgba(255, 255, 255, 0) 66.67%, rgba(255, 255, 255, 0) 100%);
        background-size: 300% 100%;
        background-position-x: calc(100% - var(--percentage));

        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }
</style>
<body>
<div class="sticky">
    <h1>Less bezel, more screen.</h1>
</div>
<script>
  const h1 = document.querySelector('h1')

  document.addEventListener('scroll', (e) => {
    let scrolled = document.documentElement.scrollTop / (document.documentElement.scrollHeight - document.documentElement.clientHeight)

    h1.style.setProperty('--percentage', `${scrolled * 100}%`)
  })
</script>
</body>
</html>